<template>
  <!--手机号输入验证码-->
  <div class="veri-content">
    <div style="flex:1;">
      <div class="txt color_gray">请选择银行卡类型</div>
      <div class="input_msg" style="position: relative;">
        <div class="msg">手机号</div>
        <input type="number" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g, ''))" class="md_s_font" name="tel" v-model="mobilePhone" placeholder="输入手机号发送验证码" maxlength="11"/>
        <div class="identifyingBtn sm_font" :class="{Btn_red: !hasCode}" @click="getVerCode" v-if="!hasCode">获取短信验证码</div>
        <div class="identifyingBtn sm_font" :class="{Btn_gray: hasCode}" v-else>{{time}}秒后重试</div>
      </div>
      <div class="input_msg">
        <div class="msg">验证码</div>
        <input type="number" onkeyup="value=value.replace(/[^\d\.]/g,'')" onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false" class="md_s_font" name="verifyCode" v-model="verifyCode" placeholder="请输入验证码" />
      </div>
      <div class="Agreement sm_font">
         <span><i class="iconfont" :class="{'icon-checked color_red': agree, 'icon-02-copy color_gray_03': !agree}" @click="agree = !agree"></i> 同意</span>
         <span class="color_ec" @click="$router.push({path:'/usrAgreement',query:{stateNum:'1'}})">《兴全基金电子交易直销式服务协议》</span>
         和
         <span class="color_ec" @click="$router.push({path:'/usrAgreement',query:{stateNum:'2'}})">《兴业银行银银平台理财账户申请开通电子协议》</span>
      </div>
      <div class="tel_btn" @click="nextStep">下一步</div>
    </div>
    <div class="bank_logo">
      <div class="logo_icon">
        <span></span>
        <span></span>
      </div>
      <p class="sm_font color_gray_03">钱包功能由兴业银行提供</p>
    </div>
  </div>
</template>

<script>
  import {sendMessage, msgVerif} from 'src/service/getData3.js'
  import {mapGetters} from 'vuex'
  import {Toast} from 'mint-ui'
  import {Storage} from 'src/utils/storage.js'

export default {
  name: 'verification',
  data: () => ({
    hasCode: false, // 是否获取验证码
    time: 60,
    mobilePhone: '',
    verifyCode: '',
    agree: true
  }),
  computed: {
    ...mapGetters(['usrId'])
  },
  created() {

  },
  methods: {
    async getVerCode() {
      if(!(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.mobilePhone))){
        Toast({
          message: '手机号码有误，请重填',
          duration: 1000
        });
        return false;
      }
      this.hasCode = true
      try {
        let data = await sendMessage({
          usrId: this.usrId,
          mobilePhone: this.mobilePhone
        })
        if (data.respCode === '00') {
          let setTime = setInterval(() => {
            if (this.time > 0) {
              this.time--
            } else {
              clearInterval(setTime)
              this.hasCode = false
              this.time = 60
            }
          }, 1000)
        } else {
          throw data.errorInfo || data.content
        }
      } catch (e) {
        console.log(e);
        Toast({
          message: e,
          duration: 1000
        });
      }
    },
    async nextStep() {
      if (!this.verifyCode) {
        Toast({
          message: '请填写验证码！',
          duration: 1000
        });
        return
      } else if (!this.agree) {
        Toast({
          message: '请同意协议',
          duration: 1000
        });
        return
      } else if (!(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.mobilePhone))) {
        Toast({
          message: '手机号码有误！',
          duration: 1000
        });
        return
      }
      this.$store.commit('changeState', true)
      try {
        let data = await msgVerif({
          usrId: this.usrId,
          mobile: this.mobilePhone,
          verifyCode: this.verifyCode
        })
        if (data.respCode !== '00'){
          throw new Error(data.errorInfo)
        } else {
//        Storage.remove('CardInfor', true)
            Toast({
              message: '绑卡成功！',
              duration: 1000
            });
            this.$router.push({path: '/Withdrawals'})
          }
        } catch (e) {
          Toast({
            message: e.message,
            duration: 1000
          });
          return
        }
      }
    },
    beforeRouteEnter(to, from, next) {
      // 有影响
      if (location.href.split("#")[1] === '/Withdrawals') {
        next({name: 'wallet'})
      } else {
        next()
      }
    },
    beforeRouteLeave(to, from, next) {

      next()
    }
  }
</script>

<style lang="scss" scoped>
@mixin background_bg($size, $sit) {
  background-repeat: no-repeat;
  background-size: $size;
  background-position: $sit;
}
.txt{
  line-height: 3rem;
  text-indent: 1rem;
}
.msg{
  float: left;
  width: 20vw;
  font-size: 1rem;
  color: #333;
}
input::-webkit-input-placeholder{
   color: #ccc;
}
.input_msg{
  line-height: 3rem;
  padding: 0 1rem;
  background: white;
}
.input_msg input {
  color: #333;
}
.identifyingBtn{
  padding: 0 .3rem;
  position: absolute;
  top: .5rem;
  right: .7rem;
  border-radius: 3px;
  line-height: 2rem;
}
.Btn_red {
  border: 1px solid #ec4e89;
  color: #ec4e89;
}
.Btn_gray {
  border: 1px solid #ccc;
  color: #666;
}
.Agreement{
  margin-top: 1rem;
  text-indent: 1rem;
  padding: 0 1rem 0 2rem;
}
.Agreement i{
  margin-left: -1.2rem;
}
.tel_btn{
  width: 80%;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  background: #eb4e89;
  margin-left: 10%;
  border-radius: .3rem;
  color: white;
  margin-top: 2rem;
}
.bank_logo {
  position: relative;
  margin: 1rem 0 2rem;
  width: 100%;
}
.bank_logo > p {
  text-align: center;
}
.logo_icon {
  width: 100%;
  margin-bottom:1rem;
  overflow: hidden;
}
.logo_icon > span {
  display: block;
  width: 50%;
  height: 2rem;
  box-sizing: border-box;
  float: left;
}
.logo_icon > span:first-child {
  background-image: url('../../../images/xingye.png');
  @include background_bg(60%, right center);
}
.logo_icon > span:last-child {
  background-image: url('../../../images/qianda.png');
  @include background_bg(contain, center);
}
.veri-content {
  display: flex;
  height:100%;
  flex-direction: column;
  margin-top: -48px;
  padding-top: 48px;
}
</style>
